<template>
	<view class="container">
		<view class="choose-way common">
			<text>选择支付方式</text>
			<view class="ipt">
				<!--  #ifdef MP-ALIPAY || MP-TOUTIAO   -->
				<view @click="handleSelect(0)">
					<view class="circle" v-if="payType != 0"></view>
					<image class="orange" v-if="payType == 0" src="http://images.linglinggong.net/icon1/51.png"
						mode="aspectFill"></image>
					<image class="pay-way" src="http://images.linglinggong.net/icon1/26.png" mode="aspectFill"></image>
					<text>支付宝支付</text>
				</view>
				<!-- #endif -->
				<!--  #ifdef MP-WEIXIN || MP-TOUTIAO   -->
				<view @click="handleSelect(3)">
					<view class="circle" v-if="payType != 3"></view>
					<image class="orange" v-if="payType == 3" src="http://images.linglinggong.net/icon1/51.png"
						mode="aspectFill"></image>
					<image class="pay-way" src="http://images.linglinggong.net/icon1/53.png" mode="aspectFill"></image>
					<text>微信支付</text>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="choose-amount common">
			<text>充值金额</text>
			<view class="main">
				<text :class="fixedMoney == 200 ? 'choose' : ''" @click="handleChoose(200)">200元</text>
				<text :class="fixedMoney == 500 ? 'choose' : ''" @click="handleChoose(500)">500元</text>
				<text :class="fixedMoney == 1000 ? 'choose' : ''" @click="handleChoose(1000)">1000元</text>
				<text :class="fixedMoney == 2000 ? 'choose' : ''" @click="handleChoose(2000)">2000元</text>
			</view>
			<view class="another">
				<text>其他金额</text>
				<view>
					<input @input="handleOtherMoney" type="number" v-model="otherMoney" placeholder="请填写不少于100元的金额"
						placeholder-class="plaho" />
				</view>
			</view>
		</view>
		<view class="confirm" @click="handlePrepaid">确认充值</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// #ifdef MP-ALIPAY || MP-TOUTIAO 
				payType: 0, //0支付宝，1微信，2钱包  //taskId cardId
				// #endif
				// #ifdef MP-WEIXIN
				payType: 3, //0支付宝，1微信，2钱包  //taskId cardId
				//#endif
				fixedMoney: '', //固定金额
				otherMoney: '', //其他金额
				money: '', //最终金额
			}
		},
		methods: {
			// 确认充值
			async handlePrepaid() {
				// payType 0支付宝，1微信，2余额
				this.money = this.fixedMoney ? this.fixedMoney : this.otherMoney
				if (this.money % 1 != 0) return uni.showToast({
					title: '请输入整数金额~',
					icon: 'none'
				})
				if ((this.money - 100) < 0) return uni.showToast({
					title: '请输入大于100的金额~',
					icon: 'none'
				})
				if (!this.money) return uni.showToast({
					title: '请填入充值金额~',
					icon: 'none'
				})
				console.log('this.money', this.money)
				// #ifdef MP-WEIXIN
				let Requestinfo = {
					payType: this.payType,
					amount: this.money,
					paybegtype: 'wx'
				}
				//#endif
				let res = await this.$fetch(this.$api.v1_recharge, Requestinfo, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let info = res.data
				if (this.payType == 0) {
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.msg, //微信、支付宝订单数据
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '充值成功~',
								icon: 'none'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 600)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					})
				} else {
					console.log('微信支付', info)
					// #ifdef MP-WEIXIN
					this.MP_WXPay(info)
					// #endif
				}
			},
			/* 微信小程序支付 */
			MP_WXPay(info) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: info.timeStamp, //时间戳
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType,
					paySign: info.paySign,
					success: res => {
						console.log('success:' + JSON.stringify(res));
						uni.showToast({
							title: '充值成功~',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 600)
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					}
				})
			},
			//选择提现类型
			handleSelect(index) {
				this.payType = index
			},
			//选择充值金额
			handleChoose(index) {
				this.fixedMoney = index
				this.otherMoney = ''
			},
			// 选择充值其他金额
			handleOtherMoney() {
				this.fixedMoney = ''
			},
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	.container {
		overflow: hidden;

		&>.common {
			margin-top: 30rpx;
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 0;

			&>text {
				margin-bottom: 20rpx;
				height: 40rpx;
				position: relative;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					left: -30rpx;
					width: 4rpx;
					height: 28rpx;
					background: #FCC928;
					border-radius: 1px;
				}
			}
		}

		&>.choose-way {

			// border: 1px solid #000000;
			&>.ipt {
				&>view {
					display: flex;
					align-items: center;
					padding: 30rpx 0;

					// 横线
					&::after {
						content: "";
						position: absolute;
						top: 220rpx;
						left: 96rpx;
						width: 654rpx;
						height: 2rpx;
						background: #F2F2F2;
						border-radius: 1px;
					}

					.circle {
						width: 33rpx;
						height: 33rpx;
						margin-right: 30rpx;
						border-radius: 50%;
						border: 1px solid rgba(64, 33, 16, 0.30);
					}

					.orange {
						width: 36rpx;
						height: 36rpx;
						margin-right: 30rpx;
					}

					.pay-way {
						// border: 1px solid #007AFF;
						width: 42rpx;
						height: 42rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		&>.choose-amount {
			background-color: #FFFFFF;
			padding: 30rpx;
			margin-top: 30rpx;

			&>.main {
				display: flex;

				&>text {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
					width: 146rpx;
					height: 176rpx;
					font-size: 17px;
					color: rgba(64, 33, 16, 0.70);
					letter-spacing: -0.41px;
					border: 1px solid rgba(64, 33, 16, 0.30);
					border-radius: 5px;

					&.choose {
						color: #F39B19;
						font-weight: bold;
						background: rgba(243, 155, 25, 0.10);
						border-color: #F39B19;
					}
				}

				&>text:last-child {
					margin-right: 0rpx;
				}
			}

			&>.another {
				&>text {
					margin: 30rpx 0 20rpx;
					height: 40rpx;
					position: relative;
					text-align: center;
					font-weight: bold;
					display: flex;
					align-items: center;
				}

				&>view {
					background: #F2F2F2;
					border-radius: 4px;
					height: 90rpx;
					display: flex;
					align-items: center;

					&>input {
						flex: 1;
						padding: 0 30rpx;
						height: 40rpx;
						font-size: 14px;
						background: transparent;

						.plaho {
							font-size: 14px;
							color: rgba(64, 33, 16, 0.50);
						}
					}
				}
			}
		}

		&>.confirm {
			position: fixed;
			bottom: 0;
			background: #FCC928;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 100rpx;

			&:active {
				opacity: .8;
			}
		}
	}
</style>